<template>
  <!-- 路由：
     
      -->
  <div>
    <h2 id="apps">生命周期</h2>

    <!-- 
     就是vue组件从创建到摧毁的各个阶段
      四大阶段：
     -->
     <h2>{{num}}</h2>
     <Ahello v-if="num==12"></Ahello>
     <button @click="add">+</button>
  </div>
</template>

<script>
import Ahello from './components/Ahello.vue'
export default {
    data(){
        return{
            num:10
        }
    },
    components:{
        Ahello
    },
    methods:{
      add(){
        this.num++
      }
    },
    beforeCreate(){
       //组件创建之前=》对象组件实例 属性进行初始化，data,methods  
       console.log('beforeCreate');
    },
    created(){ //核心
        //组件实例创建完毕 =》属性初始化完毕，data,methods  
        //发送请求=》获取后台的数据
        console.log('created');
       
    },
    beforeMount(){
        //挂载之前=》没有生成dom结构
        console.log('beforeMount');
    },
    mounted(){ //核心
         //挂载完毕=》生成dom结构=》dom操作
         console.log('mounted');
        //  console.log( document.getElementById('apps'));
    },
     beforeUpdate(){ 
        console.log('beforeUpdate'); 
     },
     updated(){
       console.log('updated');  
     },
    

    

};
</script>

<style>
</style>